<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <cpn :cmovies="movies" ></cpn> -->
			<cpn :cmovies="movies" :cmessage="message"></cpn>
		</div>
		<template id="cpn">
			<div id="">
			<!-- 	<p>
					{{cmovies}}
				</p> -->
				<ul>
					<li v-for="item in cmovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
			
		</template>
		<script type="text/javascript">
			const cpn={
				template:'#cpn',
				props:/*['cmovies','cmessage'] */ {
					cmessage:{
						type:String,
						default:'aaaaaaa',
						required:true
					},
					cmovies:{
						type:Array,
						default(){
							return []
						}
					}
				},
				data() {
					return {}
				}
		}
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好',
					movies:['海王','海贼王','海尔兄弟']
				},
				components:{
					cpn
				}
			})
		</script>
		
	</body>
</html>
